{include file="common/header"}
<link rel="stylesheet" href="//api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<div id="app" v-cloak>
    <el-curd
        :field="field"
        :search-date="false"
        :search-status="[{label: '正常', value: 1}, {label: '屏蔽', value: 0}]"
        :search-catalog="catalog"
        search-keyword="请输入门店标题/地址/联系人搜索"
        save-title="新增门店地址"
        variable="single"
        copy-authority
        preview-authority>
        <template v-slot:search>
            <div class="el-search-item">
                <div class="label">属性标签：</div>
                <div class="value">
                    <el-select v-model="attr" placeholder="查看所有属性" @change="searchData()" size="small" filterable>
                        <el-option label="全部" value=""></el-option>
                        <el-option label="热门" value="ishot"></el-option>
                        <el-option label="置顶" value="istop"></el-option>
                        <el-option label="推荐" value="isrecommend"></el-option>
                    </el-select>
                </div>
            </div>
        </template>
    </el-curd>
</div>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=RzBUcYLlr0yjdDdwxgDTqk0C6hwfRCjw"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<script>
    var config = {:json_encode($config)};
    var catalog = tree.convertString({:json_encode($catalog)});
    new Vue({
        el: '#app',
        data() {
            return {
                catalog: catalog,
                attr:'',
                field: [
                    {
                        label: '基本信息',
                        field: [
                            {
                                prop: 'id', 
                                label: '编号', 
                                table: false,
                            },
                            {
                                prop: 'cover', 
                                label: '门店图片', 
                                table: {
                                    label: '', 
                                    width: '60px', 
                                    is: 'el-image'
                                },
                                form: {is: 'el-file-select', type: 'image'},
                            },
                            {
                                prop: 'title', 
                                label: '门店标题', 
                                table: {sort: true},
                                form: {
                                    rules: [
                                        {required: true,  message: '请输入门店标题'}
                                    ],
                                }
                            },
                            {
                                prop: 'catalog_id', 
                                label: '门店分类', 
                                table: {sort: true}, 
                                form: {
                                    is: 'el-select',
                                    child: {is: 'el-option', value: catalog, props:{label: 'title', value: 'id'}},
                                    default: [],
                                    filterable: true,
                                    multiple: true,
                                    rules: [
                                        {required: true,  message: '请选择分类'}
                                    ],
                                },
                            },
                            {
                                prop: 'nickname', 
                                label: '门店联系人',
                                table: {sort: true},
                                form: {placeholder: '例：张三'}
                            },
                            {
                                prop: 'phone', 
                                label: '联系方式',
                                table: {sort: true},
                                form: {placeholder: '例：15757396315'}
                            },
                            {
                                prop: 'clicks', 
                                label: '虚拟浏览量', 
                                table: {label:'浏览量', sort: true},
                                form: {
                                    default: 0, 
                                },
                            },
                            {
                                prop: 'sort', 
                                label: '门店排序', 
                                table: {is: 'el-input', sort: true},
                                form: {
                                    default: 0, 
                                    placeholder: '降序排序，值越大越靠前，留空则自动增长',
                                },
                            },
                            {
                                prop: 'status', 
                                label: '是否显示',  
                                table: {is: 'el-switch', sort: true},
                                form: {
                                    is: 'el-switch',
                                    default: 1, 
                                },
                            },
                            {
                                prop: 'attr', 
                                label: '门店属性',  
                                form: {
                                    is: 'el-checkbox-group', 
                                    child: {is: 'el-checkbox',value: [{label: '置顶'},{label: '推荐'},{label: '热门'}]},
                                    default: [],
                                    multiple: true,
                                },
                            },
                            {
                                prop: 'create_time', 
                                label: '成立时间',  
                                table: false, 
                                form: {
                                    is: 'el-date-picker',
                                    type: 'datetime',
                                	format: 'yyyy-MM-dd HH:mm:ss',
                                	valueFormat: 'yyyy-MM-dd HH:mm:ss',
                                },
                            },
                            {
                                prop: 'map', 
                                label: '',
                                table: false,
                                form: {
        						    labelWidth: '0px',
                                    is: 'el-cms-map', 
                                    default: {address: '', latitude: '', longitude: ''}
                                },
                            },
                            {
                                prop: 'field', 
                                label: '', 
                                table: false,
                                form: {
                                    is: 'el-field', 
                                    default: typeof config.address_field == 'undefined' ? [] : config.address_field, 
                                    ifset: false,
                                    labelWidth: '0px',
                                }
                            },
                        ],
                    },
                    {
                        label: '门店详情',
                        field: [
                            {
                                prop: 'content', 
                                label: '', 
                                table: false, 
                                form: {
                                    labelWidth: '0px',
                                    is: 'el-editor',
                                },
                            },
                        ]
                    },
                    {
                        label: 'TDK设置',
                        field: [
                            {
                                prop: 'seo_url', 
                                label: 'SEO路由', 
                                table: false,
                                form: {placeholder: '只能是字母、数字、下划线、-组合',maxlength: 255}
                            },
                            {
                                prop: 'seo_title', 
                                label: 'SEO标题', 
                                table: false,
                                form: {maxlength: 72}
                            },
                            {
                                prop: 'seo_keywords', 
                                label: 'SEO关键词', 
                                table: false,
                                form: {maxlength: 120}
                            },
                            {
                                prop: 'seo_description',
                                label: 'SEO描述', 
                                table: false,
                                form: {
                                    type: 'textarea', 
                                    maxlength: 240,
                                },
                            },
                        ],
                    }
                ],
            }
        },
    });
    /**
     * 门店地址
     */
    Vue.component('el-cms-map', {
        template:`
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="labelWidth">
            <el-form-item label="门店地址：" prop="address">
                <el-input placeholder="请输入详细地址后，获取经纬度，拖动坐标可改变经纬度" style="width:calc(100% - 116px);" v-model="ruleForm.address"></el-input>
                <el-button @click="addressChange()">获取经纬度</el-button>
            </el-form-item>
            <el-form-item label="精准经纬度：" prop="latitude">
                <el-input style="width: 200px" v-model="ruleForm.latitude" disabled></el-input>
                <el-input style="width: 200px" v-model="ruleForm.longitude" disabled></el-input>
            </el-form-item>
            <el-form-item>
                <div id="map" :style="{height: mapHeight}"></div>
            </el-form-item>
        </el-form>
        `,
        props: {
            value: {
                type: Object,
            },
            labelWidth: {
                type: String,
                default: '',
            },
        },
        data() {
            return {
                ruleForm: this.value,
                rules: {
                    address: [
                        { required: true, message: '请输入门店详情地址', trigger: 'blur' },
                    ],
                },
                map: "",
                marker: "",
                mapZoom: 18,
                mapHeight: '500px',
            }
        },
        mounted() {
            // 创建Map实例
            this.map = new BMap.Map('map');
            // 禁止缩放
            this.map.disableScrollWheelZoom();
            // 禁止拖拽
            this.map.disableDragging();
            // 初始化
            this.addressChange();
        },
        methods: {
            /**
            * 地址改变
            */
            addressChange() {
                let self = this;
                let localSearch = new BMap.LocalSearch(self.map);
                // 允许自动调节窗体大小
                localSearch.enableAutoViewport(); 
                // 地址搜索回调
                localSearch.setSearchCompleteCallback(function (searchResult) {
                    // 清空原来的标注
                    self.map.clearOverlays(self.marker);
                    // 经纬度
                    let poi = searchResult.getPoi(0);
                    // 内容
                    let content = `
                    <div style="line-height:20px;padding:2px">
                        联系地址： ${self.ruleForm.address}
                    </div>`;
                    // 导航
                    let searchInfoWindow = new BMapLib.SearchInfoWindow(self.map, content, {
                        title: self.ruleForm.address,  // 标题 
                        width: 300,                    // 宽度
                        height: 105,                   // 高度
                        panel: "panel",                // 检索结果面板
                        enableAutoPan: true,           // 自动平移
                        searchTypes: [
                            BMAPLIB_TAB_SEARCH,        // 周边检索
                            BMAPLIB_TAB_TO_HERE,       // 到这里去
                            BMAPLIB_TAB_FROM_HERE      // 从这里出发
                        ]
                    }); 
                    // 设置中心点坐标和地图级别
                    self.map.centerAndZoom(poi.point, self.mapZoom);
                    // 创建标注，为要查询的地方对应的经纬度
                    self.marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat), {enableDragging: true, size: 50});
                    // 创建标注
                    self.map.addOverlay(self.marker);
                    // 提示信息
                    self.marker.addEventListener("click", function(e) {
                        searchInfoWindow.open(self.marker);
                    });
                    // 监听标注移动
                    self.marker.addEventListener('dragend', function (e) {
                        self.ruleForm.longitude = e.point.lng;
                        self.ruleForm.latitude = e.point.lat;
                    })
                    self.ruleForm.longitude = poi.point.lng;
                    self.ruleForm.latitude = poi.point.lat;
                    self.$emit('input', self.ruleForm);
                });
                // 地址搜索
                if (self.ruleForm.address != '') {
                    localSearch.search(self.ruleForm.address);
                }
            },
        }
    })
</script>
{include file="common/footer"}